<template>
	<view class="">
		<view class="userInfo">
			<uni-forms ref="dynamicForm" :rules="rules" :modelValue="formData" :label-width="100">
				<uni-forms-item class="userItem" label="姓名:" required name="name">
				   <uni-easyinput v-if="isEdit"  v-model="formData.name" placeholder="请输入姓名" />
				   <view class="showTxt" v-else>{{formData.name}}</view>
				</uni-forms-item>
				<uni-forms-item label="性别:" required name="sex">
				    <uni-data-picker v-model="formData.sex" v-if="isEdit" :localdata="sexLst" 
					popup-title="请选择性别" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
					<view class="showTxt" v-else>{{formData.sex}}</view>
				</uni-forms-item>
				<uni-forms-item class="userItem" label="手机号:" required name="phone">
				   <uni-easyinput v-if="isEdit"  v-model="formData.phone" placeholder="请输入手机" />
				   <view class="showTxt" v-else>{{formData.phone}}</view>
				</uni-forms-item>
				<uni-forms-item class="userItem" label="身份证号:" required name="id">
				   <uni-easyinput v-if="isEdit"  v-model="formData.id" placeholder="请输入身份证号" />
				   <view class="showTxt" v-else>{{formData.id}}</view>
				</uni-forms-item>
				<uni-forms-item label="出生日期:" name="date">
				    <uni-datetime-picker v-if="isEdit" type="date" :value="formData.date"/>
					<view class="showTxt" v-else>{{formData.date}}</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="btnWrap">
			<u-button :disabled="isEdit" class="btn" @click="isEdit=true">编辑</u-button>
			<u-button class="btn" :disabled="!isEdit" @click="submit('dynamicForm')">保存</u-button>
		</view>
		<u-toast ref="uToast" />
		<u-mask :show="show">
			<view class="warp" style="color:#fff">
				loading...
			</view>
		</u-mask>
	</view>
</template>

<script>
export default {
	name: '',
	components: {
	},
	data() {
		return {
			show:false,
			isEdit:false,
			formData: {
				name:'钱端',
				sex:'女',
				phone:'18805180081',
				id:'320106XXXXXXXX',
				date:'2010-01-01'
			},
			sexLst: [{
			  text: "男",
			  value: "男",
			 },
			{
			  text: "女",
			  value: "女"
			}],
			rules: {
				name: {
					rules: [{
						required: true,
						errorMessage: '请填写姓名'
					}]
				},
				sex:{
					rules: [{
						required: true,
						errorMessage: '请选择性别'
					}]
				},
				phone:{
					rules:[{
						required:true,
						errorMessage: '请输入手机号'
					}]
				},
				startTime:{
					rules:[{
						required:true,
						errorMessage: '开始时间不能为空'
					}]
				},
				id:{
					rules:[{
						required:true,
						errorMessage: '请输入身份证号'
					}]
				}
			}
		}
	},
	methods: {
		submit(formName) {
			this.$refs[formName].validate().then(res=>{
				console.log('表单数据信息：', res);
				this.show = true
				setTimeout(()=>{
					this.isEdit = false
					this.$refs.uToast.show({
						title: '保存成功',
						type: 'success'
					})
					this.show = false
				},2000)
				
			}).catch(err =>{
				console.log('表单错误信息：', err);
			})
		},
		onchange(e) {
			const value = e.detail.value[0].value
			this.formData.sex = value
		},
		onnodeclick(node) {
		},
	},
	onReady(){
	     
	},
};
</script>

<style scoped lang="scss">
.btnWrap{
	position: fixed;
	bottom:0;
	display: flex;
	height: 83.33rpx;
	align-items: center;
	justify-content: center;
	width: 100%;
	.btn{
		width: 50%;
		height: 100%;
		border-radius: 0 !important;
	}
}
.userInfo{
	padding: 41.66rpx;
}
.showTxt{
	height: 100%;
	display: flex;
	align-items: center;
}
.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
</style>
